<template>
<div>
    <el-button type="primary" size="small" @click="excelImport">
        <input type="file" name id="file" style="display:none" />
        校历导入
    </el-button>
    <el-button type="primary" size="small" @click="downloadTemplate">
        下载模板
    </el-button>
    <i class="el-icon-reading green topIcon">工作日</i>
    <i class="el-icon-s-flag yellow topIcon">周末节假日</i>
    <i class="el-icon-cloudy blue topIcon">寒假</i>
    <i class="el-icon-sunny red topIcon">暑假</i>

    <el-calendar :first-day-of-week="7">
        <template slot="dateCell" slot-scope="{date, data}">
            <p :class="data.isSelected ? ' is-selected' : ''" class="calenderCenter faPos" @click="data.isSelected ? openDia(date) : null">
                {{ data.day.split('-').slice(2).join('-') }}
                <i v-show="data.isSelected" class="el-icon-edit"></i>
                <i :class="color[showType(date) && showType(date).type - 1]" class="iconPos"></i>
            </p>
            <p class="calenderCenter gray">{{ showType(date) && showType(date).remark }}</p>
        </template>
    </el-calendar>

    <el-dialog title="日期修改" :visible.sync="dialogFormVisible" style="width: 80%; margin-left: 170px">
        <el-form :model="dayForm">
            <el-form-item label="日期" :label-width="formLabelWidth">
                <el-input disabled style="width: 80%" v-model="dayForm.date" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-select style="width: 80%" v-model="dayForm.type" placeholder="请选择日期类型">
                    <el-option label="工作日" value="1"></el-option>
                    <el-option label="周末节假日" value="2"></el-option>
                    <el-option label="寒假" value="3"></el-option>
                    <el-option label="暑假" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input style="width: 80%" v-model="dayForm.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateCal">提 交</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
    getDate,
    updateDate,
    addExceldata,
    downloadWorkShuttering
} from '@/api/src/Dashboard/calendar.js'
export default {
    data() {
        return {
            calendars: [],
            remark: '',
            dialogFormVisible: false,
            dayForm: {
                id: '',
                date: '',
                type: '',
                remark: '',
            },
            formLabelWidth: '120px',
            color: [
                'el-icon-reading green',
                'el-icon-s-flag yellow',
                'el-icon-cloudy blue',
                'el-icon-sunny red',
            ]
        }
    },
    mounted() {
        this.getCalendar()
    },
    computed: {
        showType() {
            return (date) => {
                date = date.toLocaleDateString()
                const target = this.calendars.find((ele) => ele.date === date)
                if (!target) return
                return target
            }
        },
    },
    methods: {
        // 获取日期
        async getCalendar(date) {
            const data = await getDate(date)
            this.calendars = data
        },

        // 更新日期前操作
        async openDia(date) {
            const obj = {
                1: '工作日',
                2: '周末节假日',
                3: '寒假',
                4: '暑假',
            }
            date = date.toLocaleDateString()
            const day = await getDate(date)
            const type = obj[day[0].type]

            this.dayForm = {
                id: day[0].id,
                date: day[0].date,
                type: type,
                remark: day[0].remark,
            }
            this.dialogFormVisible = true
        },

        // 更新日历
        async updateCal() {
            const obj = {
                '工作日 ': '1',
                '周末节假日 ': '2',
                '寒假': '3',
                '暑假': '4',
            }
            const form = this.dayForm
            let type = form.type
            if (!this.checkNumber(type)) {
                type = obj[type]
            }
            const data = await updateDate(form.id, form.remark, type)
            this.$message.success(data)
            this.getCalendar()
            this.dialogFormVisible = false
        },

        //验证字符串是否是数字
        checkNumber(theObj) {
            var reg = /^[0-9]+.?[0-9]*$/
            if (reg.test(theObj)) {
                return true
            }
            return false
        },

        // 校历导入
        excelImport() {
            const file = document.getElementById('file')
            file.click()
            file.onchange = () => {
                if (!this.checkType(file.files[0])) {
                    this.$message.error(
                        '文件：' + file.files[0].name + ' 文件类型错误，请使用Excel文件'
                    )
                    return false
                }
                var formdata = new FormData()
                formdata.append('file', file.files[0])

                console.log(formdata.getAll('file'))
                console.log(file.files)

                const data = addExceldata(formdata)
                this.$message.success('导入成功')
            }
        },

        // 检测文件类型
        checkType(file) {
            const fileExt = file.name.split('.').pop().toLocaleLowerCase()
            const extArr = ['xlsx', 'xls', 'csv']
            return extArr.includes(fileExt)
        },

        // 下载模板
        downloadTemplate() {
            downloadWorkShuttering()
        }
    },
}
</script>

<style scoped>
.is-selected {
    color: #1989fa;
}

.calenderCenter {
    text-align: center;
}

.faPos {
    position: relative;
}

.iconPos {
    position: absolute;
    right: 0;
    top: 0;
}

.gray {
    margin-top: -10px;
    color: #969696;
}

.yellow {
    color: #ff9900;
}

.blue {
    color: #0000ff;
}

.red {
    color: red;
}

.green {
    color: #00cc00;
}

.topIcon {
    margin: 0 15px;
}
</style>
<style scoped lang='less'>
</style>
